<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="../css/ysy.css">
<link rel="stylesheet" href="../css/index.css">
<script src="../js/until.js"></script>
<script src="https://unpkg.com/scrollreveal"></script>
<body>
 
    <!-- <div style="width: 100%;"> -->
        <header>
            <!-- 头部小黑条 -->
            <div class="top_blackLine"></div>
            <div class="header_top wrapper" id="header">   
                <div class="header_top_main fl-j" >
                    <h1>CHANEL</h1>
                    <!-- 右边四个图标 -->
                    <div class="header_top_main_youbian">
                        <ul class="fl-spaceA">
                            <li><a href="#javascript"><i class="iconfont icon-sousuo"></i></a></li>
                            <li><a href="#javascript"><i class="iconfont icon-wode"></i></a></li>
                            <li>
                                <i class="iconfont icon-dizhi"></i>
                                <!-- 地址的二级菜单 -->
                                <div class="dizhi_erji">
                                    <div>
                                        <p>寻找销售店铺</p>
                                        <div class="fl-center">
                                            <i class="iconfont icon-dingwei"></i>
                                            <span>所在地</span>
                                        </div>
                                        <div class="fl" style="width: 100%; height: 40px;">
                                            <input type="text" placeholder="城市/城市" style="width:250px ;">
                                            <div style="width:40px; height:40px; line-height: 40px; text-align:center; margin-top: 0;">
                                                <i class="iconfont icon-sousuo"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li><a href="#javascript"><i class="iconfont icon-24gl-bag2"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
    
            <div class="header_bottom wrapper">
                <nav>
                    <ul class="fl-spaceA">
                        <!-- zhanKai 展开二级菜单 -->
                        <li id="zhankai" >
                            <a href="#javascript" >香水</a>
                            <!-- erji  二级菜单 -->
                            <div class="erji" id="erji">
                                <div>
                                    <div>
                                        <h6><a href="#javascript">精选系列</a></h6>
                                        <div><a href="#javascript">珍藏系列香水</a></div>
                                        <div><a href="#javascript">香奈儿可可小姐香水</a></div>
                                        <div><a href="#javascript">香奈儿5号</a></div>
                                        <div><a href="#javascript">香奈儿梧桐影木香精高级手工坊礼盒</a></div>
                                    </div>
                                    <div class="margin-t60">
                                        <h6><a href="#javascript">明星系列</a></h6>
                                        <div><a href="#javascript">香奈儿身体洗护剂</a></div>
                                        <div><a href="#javascript">香水的造艺</a></div>
                                        <div><a href="#javascript">新品资讯</a></div>
                                        <div><a href="#javascript">男士精选</a></div>
                                        <div><a href="#javascript">细节艺术</a></div>
                                    </div>
                                </div>
    
                                <div>
                                    <h6><a href="#javascript">女士香水</a></h6>
                                    <div><a href="#javascript">5号香水系列</a></div>
                                    <div><a href="#javascript">可可小姐香水系列</a></div>  
                                    <div><a href="#javascript">嘉柏丽尔香水系列</a></div>
                                    <div><a href="#javascript">邂逅香水系列</a></div>
                                    <div><a href="#javascript">邂逅清新香水系列</a></div>
                                    <div><a href="#javascript">邂逅柔情香水系列</a></div>
                                    <div><a href="#javascript">邂逅活力香水系列</a></div>
                                    <div><a href="#javascript">可可小姐黑色香水系列</a></div>
                                    <div><a href="#javascript">可可香水系列</a></div>
                                    <div><a href="#javascript">魅力香水系列</a></div>
                                    <div><a href="#javascript">感性魅力香水系列</a></div>
                                    <div><a href="#javascript">十九号香水系列</a></div>
                                    <div><a href="#javascript">水晶恋香水系列</a></div>
                                    <div><a href="#javascript">香奈儿之水珍藏系列香水</a></div>
                                </div>
    
                                <div>
                                    <h6><a href="#javascript">男士香水</a></h6>
                                    <div><a href="#javascript">蔚蓝男士香水系列</a></div>
                                    <div><a href="#javascript">男士运动香水系列</a></div>
                                    <div><a href="#javascript">男士极限运动香水系列</a></div>
                                    <div><a href="#javascript">男士香水系列</a></div>
                                    <div><a href="#javascript">白色魅力精粹男士香水系列</a></div>
                                    <div><a href="#javascript">白金男性香水系列</a></div>
                                    <div><a href="#javascript">自我男性香水系列</a></div>
                                    <div><a href="#javascript">绅士男性香水系列</a></div>
                                    <div><a href="#javascript">力度男性香水系列</a></div>
                                    <div><a href="#javascript">香奈儿之水</a></div>
                                    <div><a href="#javascript">珍藏系列香水</a></div>
                                </div>
    
                                <div>
                                    <h6><a href="#javascript">套组</a></h6>
                                    <div><a href="#javascript">礼物套组</a></div>
                                </div>

                                <div>
                                    <span>
                                        <a href="#javascript"  id="close">X</a>
                                    </span>
                                </div>
                            </div>
                        </li>
                        <li><a href="#javascript">彩妆</a></li>
                        <li><a href="#javascript">护肤品</a></li>
                        <li><a href="#javascript"  class="red">N°1 de CHANEL</a></li>
                    </ul>
                </nav>
            </div>
       </header>

    <main>
        <section class="section_one fl">
            <div class="w50 headline">
                <div>
                    <p>2022节日彩妆系列</p>
                    <p class="f-50">登陆心愿宇宙</p>
                    <p>香奈儿彩妆创意工作室捕捉月亮——这一皎洁天体反射出的纷繁光芒，呈现璀璨夺目的系列作品。灵感源自明暗对比法，丰富的色彩在光影变幻间，交织出神秘的梦幻，打造迷人妆容。</p>
                    <div class="fl-center fl-spaceA">
                        <i class="iconfont icon-zhaoxiangji"></i>
                        <span>虚拟试妆</span>
                    </div>
                </div>
            </div>
            <div class="w50">
                <img class="rightline" src="../images/11.jpg" alt="">
            </div>
        </section>

        <section class="section_two fl">
            <div class="w50 leftline">
                <img src="../images/10.jpg" alt="">
            </div>
            <div class="w50 headline">
                2022节日彩妆系列
                登陆心愿宇宙
            </div>
        </section>

        <section class="section_three fl">
            <div class="w50">
                <div class="headline">
                    <!-- 上 -->
                    <div>
                        <p>香奈儿高光修颜盘</p>
                        <p class="f-30">限定创作</p>
                    </div>
                    
                    <!-- 中 -->
                    <img  src="../images/7.jpg" alt="">
                    
                    <!-- 下 -->
                    <div>
                        <p>表面饰有五号香水瓶身的浮雕图案，璀璨高光，勾勒脸庞轮廓，增添缎面光泽。</p>
                        <div class="btn">立即购买</div>
                    </div>
                </div>
            </div>

            <div class="w50">
                <img src="../images/9.jpg" alt="" class="rightline">
            </div>
        </section>

        <section class="section_four">
            <img src="../images/12.jpg" alt="" class="overline">
        </section>

        <section class="section_five fl">
            <div class="w50   leftline">
                <img src="../images/8.jpg" alt="">
            </div>
            
            <div class="w50 rightline">
                <div>
                    <!-- 上 -->
                    <div class="rightline">
                        <p class="f-30">香奈儿四色眼影937号</p>
                        <p class="f-30">限定创作</p>
                        <p>包含铜红色、琥珀金、古铜色和棕色四种色调，饰有五号香水瓶身浮雕图案和品牌标志，打造哑光、珠光和缎光妆效。
                        </p>
                    </div>
                    
                    <!-- 中 -->
                    <img src="../images/6.jpg" alt="">
                    
                    <!-- 下 -->
                    <div>
                        <p>OMBRES DE LUNE</p>
                        <p>937</p>
                        <div class="btn">立即购买</div>
                    </div>
                </div>
            </div>
        </section>

        <section class="section_sex fl">
            <div class="w50 leftline">
                <div>
                    <!-- 上 -->
                    <div class="leftline">
                        <p class="f-30">香奈儿魅力精萃唇膏</p>
                        <p>817号，827号，824号和858号，系列呈现全新色号，赋予双唇浓郁色泽，打造鲜明的缎光唇妆。</p>
                    </div>
                    
                    <!-- 中 -->
                    <img src="../images/4.jpg" alt="">
                    
                    <!-- 下 -->
                    <div>
                        <p>BRUN LUNAIRE</p>
                        <p>827</p>
                        <div class="btn">立即购买</div>
                    </div>
                </div>
            </div>

            <div class="w50 rightline">
                <img src="../images/5.jpg" alt="">
            </div>
        </section>

        <section class="section_eight">
            <div>
                <p class="f-30">给你奇幻，给你香奈儿</p>
                <p>探索节日礼选。</p>
                <div class="tansuo">探索</div>
            </div>
            
            <div>
                <p class="f-30">香奈儿5号香水系列</p>
                <p>探索香奈儿的传奇香水作品。</p>
                <div class="tansuo">探索</div>
            </div>
        </section>
    </main>
    <div class="section_nine">
        <h1>2022节日彩妆系列</h1>
        <!-- 大盒子都给装起来 -->
        <div class="fl wrapper">
            <!-- 左边一列盒子 -->
            <div class="w50">
                <!-- 第一个盒子 -->
                <div class="fl">
                    <!-- 左边的图片 -->
                    <div>
                        <img src="../images/13.jpg" alt="">
                    </div>
                    <!-- 右边的详情 -->
                    <div class="section_nine_left_right headerline">
                        <p>
                            <a href="#javascript" class="f-20">ÉCLAT LUNAIRE - EXCLUSIVE CREATION</a>
                        </p>
                        <p>
                            <a href="#javascript">香奈儿高光修颜盘</a>
                        </p>
                        <div>
                            <p class="xianliangban">限量版</p>
                            <div class="fl">
                                <img src="../images/色彩/1.jpg" alt="" class="xiangsudian">
                                <span>16G</span>
                            </div>
                            <p>￥ 720.00</p>
                        </div>
                        <div class="first_div">立即购买</div>
                    </div>
                </div>
                <!-- 第二个盒子 -->
                <div class="fl margin-t30">
                    <!-- 左边的图片 -->
                    <div>
                        <img src="../images/3.jpg" alt="">
                    </div>
                    <!-- 右边的详情 -->
                    <div class="section_nine_left_right">
                        <p>
                            <a href="#javascript" class="f-20">ROUGE ALLURE LAQUE</a>
                        </p>
                        <p>
                            <a href="#javascript">香奈儿魅力炫光唇釉</a>
                        </p>
                        <div>
                            <p class="xianliangban">限量版</p>
                            <div class="fl">
                                <img src="../images/色彩/3.jpg" alt="" class="xiangsudian">
                                <span>88 - ROSE MYSTÈRE</span>
                            </div>
                            <p>￥ 380.00</p>
                        </div>
                        <div class="first_div">立即购买</div>
                    </div>
                </div>
                <!-- 第三个盒子 -->
                <div class="fl margin-t30">
                    <!-- 左边的图片 -->
                    <div>
                        <img src="../images/2.jpg" alt="">
                    </div>
                    <!-- 右边的详情 -->
                    <div class="section_nine_left_right">
                        <p>
                            <a href="#javascript" class="f-20">ROUGE ALLURE L'EXTRAIT</a>
                        </p>
                        <p>
                            <a href="#javascript">香奈儿魅力精萃唇膏</a>
                        </p>
                        <div>
                            <p class="xianliangban">限量版</p>
                            <div class="fl">
                                <img src="../images/色彩/5.jpg" alt="" class="xiangsudian">
                                <span>817</span>
                            </div>
                            <p>￥ 470.00</p>
                        </div>
                        <div class="first_div">立即购买</div>
                    </div>
                </div>
                <!-- 第四个盒子 -->
                <div class="fl margin-t30">
                    <!-- 左边的图片 -->
                    <div>
                        <img src="../images/1.jpg" alt="">
                    </div>
                    <!-- 右边的详情 -->
                    <div class="section_nine_left_right">
                        <p>
                            <a href="#javascript" class="f-20">LE VOLUME RÉVOLUTION DE CHANEL</a>
                        </p>
                        <p>
                            <a href="#javascript">香奈儿炫密3D睫毛膏</a>
                        </p>
                        <div>
                            <p class="no_xianliangban">限量版</p>
                            <div class="fl">
                                <img src="../images/色彩/7.jpg" alt="" class="xiangsudian">
                                <span>10 - NOIR</span>
                            </div>
                            <p>￥ 350.00</p>
                        </div>
                        <div class="first_div">立即购买</div>
                    </div>
                </div>
            </div>



            <!-- 右边一列盒子 -->
            <div class="w50">
                <div class="fl">
                    <!-- 左边的图片 -->
                    <div>
                        <img src="../images/14.jpg" alt="">
                    </div>
                    <!-- 右边的详情 -->
                    <div class="section_nine_left_right">
                        <p>
                            <a href="#javascript" class="f-20">LES 4 OMBRES - EXCLUSIVE CREATION</a>
                        </p>
                        <p>
                            <a href="#javascript">香奈儿四色眼影</a>
                        </p>
                        <div>
                            <p class="xianliangban">限量版</p>
                            <div class="fl">
                                <img src="../images/色彩/2.jpg" alt="" class="xiangsudian">
                                <span>937 - OMBRES DE LUNE</span>
                            </div>
                            <p>￥ 620.00</p>
                        </div>
                        <div class="first_div">立即购买</div>
                    </div>
                </div>
                <!-- 第二个盒子 -->
                <div class="fl margin-t30">
                    <!-- 左边的图片 -->
                    <div>
                        <img src="../images/3.jpg" alt="">
                    </div>
                    <!-- 右边的详情 -->
                    <div class="section_nine_left_right">
                        <p>
                            <a href="#javascript" class="f-20"> 
                                ROUGE ALLURE LAQUE</a>
                        </p>
                        <p>
                            <a href="#javascript">香奈儿魅力炫光唇釉</a>
                        </p>
                        <div>
                            <p class="xianliangban">限量版</p>
                            <div class="fl">
                                <img src="../images/色彩/4.jpg" alt="" class="xiangsudian">
                                <span>89 - ROUGE OMBRÉ</span>
                            </div>
                            <p>￥ 380.00</p>
                        </div>
                        <div class="first_div">立即购买</div>
                    </div>
                </div>
                <!-- 第三个盒子 -->
                <div class="fl margin-t30">
                    <!-- 左边的图片 -->
                    <div>
                        <img src="../images/2.jpg" alt="">
                    </div>
                    <!-- 右边的详情 -->
                    <div class="section_nine_left_right">
                        <p>
                            <a href="#javascript" class="f-20">ÉROUGE ALLURE L'EXTRAIT</a>
                        </p>
                        <p>
                            <a href="#javascript">香奈儿魅力精萃唇膏</a>
                        </p>
                        <div>
                            <p class="xianliangban">限量版</p>
                            <div class="fl">
                                <img src="../images/色彩/6.jpg" alt="" class="xiangsudian">
                                <span>827</span>
                            </div>
                            <p>￥ 470.00</p>
                        </div>
                        <div class="first_div">立即购买</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 黑线 -->
        <div class="black_line"></div>

        <!-- 客服 -->
        <div class="kefu wrapper fl-spaceA">
            <div>
                <h4>线上客服</h4>
                <p>香奈儿线上专门店客服团队将竭诚为您服务,请联系线上美容顾问
                    或致电 4009-555-888，工作时间每日上午9点至晚上24点。</p>
            </div>
            <div>
                <h4>购买</h4>
                <p>每笔订单均附赠指定体验装。</p>
                <p>并享受免费订单配送。</p>
            </div>
            <div>
                <h4>最新资讯</h4>
                <p>订阅香奈儿最新资讯：限量创作系列，到心意好礼，尽在掌握。</p>
                <button>订阅</button>
            </div>
        </div>
    </div>
    
    <footer>
        <!-- <div class="wrap">
            <a class="btn-0" href="#">Swipe</a>
        </div> -->
        <!-- <div class=".footer_firstDiv"> -->
        <!-- 上 -->
        <div class="footer_top">
            <h1><a href="#javascript">CHANEL</a></h1>
        </div>  
        <!-- 中 -->
        <div class="footer_middle">
            <ul class="fl-spaceB">
                <li>
                    <h2><a href="#javascript">前往 CHANEL.com</a></h2>
                    <p><a href="#javascript">高级定制服</a></p>
                    <p><a href="#javascript">精品</a></p>
                    <p><a href="#javascript">腕表</a></p>
                    <p><a href="#javascript">高级珠宝</a></p>        
                </li>
                <li>
                    <h2><a href="#javascript">香奈儿与您</a></h2>
                    <p><a href="#javascript">隐私政策</a></p>
                    <p><a href="#javascript">法律声明</a></p>
                    <p><a href="#javascript">Inside CHANEL</a></p>
                    <p><a href="#javascript">工作机会</a></p>
                    <p><a href="#javascript">Fondation CHANEL</a></p>
                    <p><a href="#javascript">CHANEL News</a></p>
                </li>
                <li>
                    <h2><a href="#javascript">销售店铺查询</a></h2>
                    <p><a href="#javascript">寻找销售店铺</a></p>
                </li>
                <li>
                    <h2><a href="#javascript">服务</a></h2>
                    <p><a href="#javascript">近期活动</a></p>
                    <p><a href="#javascript">FAQ</a></p>
                    <p><a href="#javascript">线上专属服务</a></p>
                    <p><a href="#javascript">联系我们</a></p>
                    <p><a href="#javascript">订阅品牌资讯</a></p>
                </li>
            </ul>
        </div>
        <!-- 下 -->
        <div class="footer_bottom fl-spaceB">
            <!-- 左 -->
            <div class="fl-spaceB footer_bottom_left">
                <img src="../images/logo1.png" class="logo1">
                <img src="../images/logo2.png" class="logo2">
                <p>上海工商</p>
                <p>沪ICP备09005344号</p>
                <p>沪公网安备 </p>
                <p>31010602002483号</p>
            </div>
            <!-- 右 -->
            <div class="fl-right footer_bottom_right">
                <div class="fl">
                    <p id="gray">Languages</p>
                    <p>中国大陆</p>
                </div>
                <div class="fl-a">
                    <i class="iconfont icon-xinlangweibo"></i>
                    <span><a href="#javascript">rk</a></span>
                </div>
            </div>
        </div>
    <!-- </div> -->
    </footer>
    <!-- </div> -->
 
</body>

<script>
    let close = document.getElementById('close');
    let erji = document.getElementById('erji');
    let zhankai = document.getElementById('zhankai');
    let header = document.getElementById('header');
    close.addEventListener('click',()=>{
        erji.style.display = 'none';
    })
    zhankai.addEventListener('mousemove',()=>{
        erji.style.display = 'block';
    })
    zhankai.addEventListener('mouseout',()=>{
        erji.style.display = 'none';
    })
    window.onscroll = function(){
        const offsetY = getScrollOffset().y;
        console.log(offsetY);
        if(offsetY>=5956){
            header.style.display = 'none';
        }
        else{
            header.style.display = 'block';
        }
    }
    
ScrollReveal().reveal('.headline',{
    // origin:"left",
    // distance:"100px",
    duration:2000,
    // easing:"ease",
    rotate:{
        x:0,
        y:0,
        z:30
    },
    // scale:1.5,
    reset:true
    // duration:2000
});
    
ScrollReveal().reveal('.rightline',{
    origin:"right",
    distance:"300px",
    duration:1500,
    easing:"ease",
    // rotate:{
    //     x:0,
    //     y:0,
    //     z:30
    // },
    reset:true
    // duration:2000
});
ScrollReveal().reveal('.leftline',{
    origin:"left",
    distance:"300px",
    duration:1500,
    easing:"ease",
    // rotate:{
    //     x:0,
    //     y:0,
    //     z:30
    // },
    reset:true
    // duration:2000
});
ScrollReveal().reveal('.overline',{
    origin:"top",
    distance:"300px",
    duration:1500,
    // easing:"ease",
    // rotate:{
    //     x:0,
    //     y:0,
    //     z:66
    // },
    reset:true
    // duration:2000
});

</script>
</html>